<template>
    <div class="practice">
        <div class="titleBox">
            <div class="titleName" style="width: 60%;">
                练习名称
            </div>
            <div class="titleName" style="width: 20%;">
                完成度
            </div>
            <div class="titleName" style="width: 20%;">
                布置日期
            </div>
        </div>


        <div class="practiceContent">
            <div class="practiceitem" v-for="(item, index) in practiceList" :key="index"
                @click="handleGoPracticeDetail(item)">
                <div style="width: 60%;">
                    {{ item.name }}
                </div>
                <div style="width: 20%;">
                    {{ item.complete }}
                </div>
                <div style="width: 20%;">
                    {{ item.layoutDate }}
                </div>
            </div>

        </div>


        <div class="pageBox">
            <el-pagination @current-change="handleCurrentChange" background :current-page.sync="pageInfo.limit"
                :page-size="pageInfo.limit" layout="total, prev, pager, next" :total="pageInfo.total">
            </el-pagination>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            pageInfo: {
                page: 1,
                limit: 10,
                total: 100,
            },
            practiceList: [
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '三年级上第一单元单词（10题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '三年级上第一单元单词（10题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },
                { name: '长元音i-e课文练习（4题）', complete: "0/1", layoutDate: '6月26日 星期三' },

            ]
        }

    },
    methods: {
        handleGoPracticeDetail(item) {
            this.$router.push({ name: "practiceDetail" })
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
        },
    }
}
</script>
<style scoped lang="scss">
.practice {
    width: 100%;
    background-color: #ffffff;
    margin-top: 16px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    height: 596px;
    position: relative;

    .titleBox {
        display: flex;
        align-items: center;

        .titleName {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
            line-height: 36px;
        }
    }


    .practiceContent {
        .practiceitem {
            height: 48px;
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 20px;
            border-radius: 0px 0px 0px 0px;
            border-top: 1px solid #E7E7E7;
            cursor: pointer;
        }
    }

    .pageBox {
        position: absolute;
        bottom: 10px;
        right: 60px;
    }
}



::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #4BA840;
}

::v-deep .el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #4BA840;
}
</style>